<template>
	<m-layout title="实名认证">
		<view class="flex">
			<m-icon type="icon-anquan" spa="0 10 0 0" wh="42" color='#846CFF'></m-icon>
			<m-text ftsize="34" weight="700">上传身份证照片</m-text>
		</view>
		<m-text block spa="12 0 0" ftsize="24" color="#999">确认该身份证影像是本人名下最新且有效的身份证影像</m-text>
		<m-block class="from" gap="0 24" spa="30 0">
			<m-input placeholder="请选择证件类型" v-model="type">
				<view class="item_title" slot="left">
					<text class="from_text1">证件类型</text>
				</view>
			</m-input>
			<m-input placeholder="请输入真实姓名" v-model="truename">
				<view class="item_title" slot="left">
					<text class="from_text1">姓名</text>
				</view>
			</m-input>
			<m-input className="bordernone" placeholder="请输入身份证" v-model="idcard">
				<view class="item_title" slot="left">
					<text class="from_text1">身份证</text>
				</view>
			</m-input>
		</m-block>
		<m-block class="from" gap="24" spa="30 0">
			<m-text block spa="0 0 30 0 " weight="700">请上传身份证正反面</m-text>
			<view class="flex-between">
				<m-image wh="320 185" :src="idCardEmblem || authentication1" @click="addPhoto('1')"></m-image>
				<m-image wh="320 185" :src="idCardFace || authentication2" @click="addPhoto('2')"></m-image>
			</view>
			<!-- <uploadPhoto v-model="imgList" placeholder="请上传身份证正反面" :length="2"></uploadPhoto> -->
		</m-block>
		
		<view class="align-center" v-if="userinfo.isv  <=0">
			<m-agreement spa="70 0 30" v-model="isCheck" title="用户服务协议与隐私政策" code="yhfwxy"></m-agreement>
			
			<m-button :loading="isLoading" block @click="BindIdcard">提交</m-button>
		</view>

	</m-layout>
</template>

<script>
	import { chooseImage } from '@/utils/tools.js';
	import { BindIdcard } from '@/api/Users.js'
	import { Upload } from '@/api/Ctrls.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				idCardEmblem:"",
				idCardFace:"",
				authentication1:'https://files.hcypai.com/static/imgs/authentication1.png',
				authentication2:'https://files.hcypai.com/static/imgs/authentication2.png',
				
				type: '身份证',
				isLoading: false,
				isCheck: false,
				truename: '',
				idcard: '',
				imgList: [],
			};
		},
		computed: {
			...mapState({
				userinfo:state=>state.user.userinfo
			}),
		},
		onLoad() {
			this.init()
		},
		methods: {
			async BindIdcard() {
				if (!this.truename) {
					return this.Toast('请输入用户名')
				}
				if (!this.idcard) {
					return this.Toast('请输入身份证号码')
				}
				if (!this.idCardEmblem || !this.idCardFace) {
					return this.Toast('请上传身份证正反面')
				}
				if (!this.isCheck) {
					return this.Toast('请阅读并同意用户服务协议')
				}
				this.isLoading = true;
				const { success, msg } = await BindIdcard({
					truename: this.truename,
					idcard: this.idcard,
					idCardEmblem: this.idCardEmblem,
					idCardFace: this.idCardFace,
				})
				this.isLoading = false;
				this.Toast(msg)
				if (success) {
					await this.sleep(1000)
					this.Jump()
				}
			},
			async addPhoto(type){
				
				const { tempFilePaths, tempFiles} = await chooseImage()
				
				tempFiles[0].FileName = tempFiles[0]['name'];
				// console.log(tempFiles)
				const { success, data ,msg} = await Upload(tempFilePaths[0]);
				if(!success){
					that.Toast(msg)
				}
				if (success) {
					if(type== '1'){
						this.idCardEmblem = data
					}else{
						this.idCardFace = data
					}
				}
			},
			async init() {
				this.idCardFace = this.userinfo.idCardFace;
				this.idCardEmblem = this.userinfo.idCardEmblem;
				this.truename = this.userinfo.truename;
				this.idcard = this.userinfo.idcard;
				
			},
		},
		onPullDownRefresh() {
			this.init();
		},

	}
</script>

<style lang="scss">
	.from {

		/deep/ .feedback_img {
			background: #F7F5FF;
		}

		.m-input {
			background: unset;
			border: unset;
			border-bottom: 1rpx solid #E7E7E7;
			border-radius: 0;
			padding: 24rpx 0;
		}

		.from-item {
			margin: 0;
		}

		.item_title {
			width: 150rpx;
		}

		.from_text1 {
			font-size: 28rpx;
			font-weight: bold;
			color: #141418;
		}

		.pick-regions {
			padding: 24rpx 0;
			border-bottom: 2rpx solid var(--border);
			align-items: center;

			.left {
				flex: 1;
				align-items: center;

				.uni-picker {
					flex: 1;
					font-size: var(--fs_28);
					color: var(--text);
					font-family: PingFang SC;
					font-weight: 400;
				}

				.textarea {
					padding-top: 8rpx;
					width: unset;
					flex: 1 !important;
					font-size: var(--fs_30);
					color: var(--text);
					font-family: PingFang SC;
					font-weight: 400;

				}

				.placeholder {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.from-item-pcs {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #888888;
		}



		.input_text {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}

		.from_text2 {
			font-size: 28rpx;
			font-weight: 400;
			color: #888888;
		}

		.label {
			background: #FFFFFF;
			border-radius: 60rpx;
			border: 1rpx solid #DDDDDD;
			text-align: center;
			color: #888888;
			padding: 4rpx 35rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
		}
	}

	.bordernone {
		border: unset !important;
	}
</style>